<template>
  <div>
    <FormCard style="box-shadow: 0 0 5px #e3e5e4;" v-for="(item, rowIndex) in dataSource">
      <div class="manual-selected-row-list-inner">
        <div class="manual-selected-row-list-inner-body">
          <template v-for="(field, index) in fields">
            <template v-if="index < 4 || showMore[rowIndex]">
              <renderFieldColumn :item="item" :field="field" :index="index"/>
            </template>
          </template>

          <ManualRelationFormCardBottomButton
              style="padding: 5px 15px"
              v-if="fields.length >= commonShowCount"
              v-model:showMore="showMore[rowIndex]"/>
        </div>
        <div class="manual-selected-row-list-inner-side">
          <van-button icon="close" size="small" @click="() => remove(item)"></van-button>
        </div>
      </div>
    </FormCard>
  </div>
</template>
<script setup>
import {createProps, getFieldConfigById} from '@/utils';
import FormCard from '@comp/FormEngine/field/Card/FormCard.vue';
import FieldColumnRegistry from '@comp/FormEngine/field/FieldColumnRegistry';
import {h, ref, shallowRef} from 'vue';
import ManualRelationFormCardBottomButton
  from '@comp/FormEngine/field/relation/RelationFormList/ManualRelationFormCardBottomButton.vue';

defineOptions({name: 'ManualSelectedRowList'});
const props = defineProps({
  dataSource: createProps(Array, () => []),
  fields: createProps(Array),
  formDefinition: createProps(Object, () => undefined),
  manualConfig: createProps(Object, () => undefined),
});
const commonShowCount = shallowRef(4);
const showMore = ref({});

function remove(item) {
  let index = props.dataSource.find(i => i === item);
  if (index !== -1) {
    props.dataSource.splice(index, 1);
  }
}

function renderFieldColumn({field, index, item}) {
  let fieldConfig = getFieldConfigById(field.fieldId, props.formDefinition);
  if (!fieldConfig) return;
  let columnComponent = FieldColumnRegistry[fieldConfig.component];

  return h(columnComponent, {
    value: item[field.fieldId],
    label: field.label,
    title: item[`${field.fieldId}&title`] || item[field.fieldId],
    fieldConfig
  });
}

function init() {
  showMore.value = {};
}

defineExpose({
  init
})

</script>
<style lang="less">
.manual-selected-row-list-inner {
  display: flex;
  height: fit-content;
  align-items: center;
  justify-content: center;
}

.manual-selected-row-list-inner-body {
  flex: 1;
}

.manual-selected-row-list-inner-side {
  width: fit-content;
  height: 100%;
}
</style>